<template>
  <div class="home">
    <header>
      <a class="icon" href='#/search'>
        <i class="iconfont icon-sousuo"></i>
      </a>
      <span class="title ellipsis">
        {{position}}
      </span>
      <span class="login">
        登录|注册
      </span>
    </header>
    <nav class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"> 
          <a class="nav-item" v-for="item in navitems" :key="item.icon">
            <img :src="require('./images/nav/'+item.icon)"/>
            <p class="ellipsis">{{item.name}}</p>
          </a>
        </div>
        <div class="swiper-slide"> 
          <a class="nav-item" v-for="item in navitems2" :key="item.icon">
            <img :src="require('./images/nav/'+item.icon)"/>
            <p class="ellipsis">{{item.name}}</p>
          </a>
        </div>
      </div>
        <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> 
      -->
    </nav>
    <div class="div-shop-list">
      <div class="header">
        <i class="iconfont icon-xuanxiang"></i>附近店铺
      </div>
      <div class="shoplist">
        <div class="shop" v-for="shop in shopList" :key="shop.id">
          <img :src="require('./images/shop/'+shop.image_path)" />
          <div>
            <div>
                <span :style="{visibility:shop.is_premium?'visible':'hidden'}">品牌</span>
                <span class="ellipsis">{{shop.name}}</span>
                <span>保&nbsp;准&nbsp;票</span>
            </div>
            <div>
                <span>{{shop.rating}}</span>
                <span>月售{{shop.recent_order_num}}单</span>
                <span :style="{visibility:shop.delivery_mode?'visible':'hidden'}">{{shop.delivery_mode.text}}</span>
                <span :style="{visibility:shop.delivery_mode?'visible':'hidden'}">准时达</span>
            </div>
            <div>
                <span class="rating">¥{{shop.float_minimum_order_amount}}&nbsp;/&nbsp;{{shop.piecewise_agent_fee.tips}}</span>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Footer from '../../components/Footer/Footer.vue'

import Swiper from 'swiper'

export default {
  data() {
    return {
      position: '凤城四路凤城四路凤城四路凤城四路凤城四',
      navitems: [
        {icon:'1.jpg', name:'甜品饮品',path: ''},
        {icon:'2.jpg', name:'商超便利',path: ''},
        {icon:'3.jpg', name:'美食',path: ''},
        {icon:'4.jpg', name:'简餐',path: ''},
        {icon:'5.jpg', name:'新店特惠',path: ''},
        {icon:'6.jpg', name:'准时达',path: ''},
        {icon:'7.jpg', name:'预定早餐',path: ''},
        {icon:'8.jpg', name:'土豪推荐',path: ''}
      ],
      navitems2: [
        {icon:'9.jpg', name:'甜品饮品',path: ''},
        {icon:'10.jpg', name:'商超便利',path: ''},
        {icon:'11.jpg', name:'美食',path: ''},
        {icon:'12.jpg', name:'简餐',path: ''},
        {icon:'13.jpg', name:'新店特惠',path: ''},
        {icon:'14.jpg', name:'准时达',path: ''}
      ],
      shopList: []
    }
  },
  created () {
    this.getShopList();
  },
  mounted () {
    new Swiper ('.swiper-container', {
      loop: true,
      //autoplay: true,
      //direction: 'vertical', // 垂直切换选项
      // 如果需要分页器
      pagination: '.swiper-pagination',
      // 如果需要前进后退按钮
      //nextButton: '.swiper-button-next',
      //prevButton: '.swiper-button-prev',
    });
  },
  methods: {
    async getShopList() {
      const {data:res}=await this.$axios.get('/shops');
      console.log(res);
      if(res&&res.code==0)
      this.shopList=res.data;
      // else
      //   console.error(res.msg);
    }
  },
  components: { Footer },

}
</script>

<style lang="scss" scoped>
div.home {

  header {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    background-color: $header-bg-color;
    color: $header-text-color;
    padding: 4px 8px 4px 8px;   
    text-align: center;
    vertical-align: middle;
    .icon {
      float: left;
      margin-top: 4px;
      i {
         
          font-size: 24px;
          width: 24px;
          height: 24px;
          color: white;
      }
    }
    .title {
      font-size: 18px;
      line-height: 28px;
      max-width: 60%;
      display: inline-block;
    }
    .login {
      float: right;
      line-height: 28px;
      font-size: 14px;
    }
  }

  nav.swiper-container {
    height: 180px;
    margin-bottom: 8px;

    div.swiper-slide {
      display: flex;
      flex-wrap: wrap;
      top: 0px;
      //height: 160px;
      background-color: $nav-bg-color;
      margin-bottom: 8px;

      a.nav-item {
        text-align: center;
        width: 25%;
        img {
          margin-top: 4px;
          width: 36px;
          height: 36px;
        }
        p {
          line-height: 24px;
          color: black;
          
        }
        &:active {
            background-color: #f0f0f0;
        }
      }
    }
  }

  

  div.div-shop-list {
    background-color: $list-bg-color;
    margin-bottom: 64px;

    div.header {
      padding: 8px;
      i {
        margin-right: 4px;
      }
    }
    div.shop {
      padding: 8px;
      display: flex;
      img {
        width: 96px;
        height: 96px;
        margin-right: 8px;
      }
      div {
        flex-grow: 1;
        display: inline-block;
        div:nth-child(1) {
          display: flex;
          align-items: flex-start;
          padding: 4px;
          height: 32px;

          span:nth-child(1) {
            padding: 2px;
            margin-right: 4px;
            background: gold;
            font-size: 14px;
          }
          span:nth-child(2) {
            flex-grow: 1;
            font-weight: 900;
          }
          span:nth-child(3) {
            padding: 2px;
            background: lightgray;
            font-size: 14px;
          }
        }
        div:nth-child(2) {
          display: flex;
          align-items: flex-end;
          height: 16px;
          padding: 4px;
          margin-bottom: 4px;

          span:first-child {
            color: red;
            margin-right: 8px;
          }
          span:nth-child(2) {
            font-size: 14px;
            flex-grow: 1;
          }
          span:nth-child(3) {
            padding: 4px;
            background: $header-bg-color;
            color: $header-text-color;
            font-size: 14px;
            border-radius: 2.5px;
            margin-right: 8px;
          }
          span:nth-child(4) {
            padding: 3px;
            font-size: 14px;
            color:  $header-bg-color;
            border: solid 1px $header-bg-color;
            border-radius: 2.5px;
          }
        }
       div:nth-child(3) {
          display: flex;
          padding: 2px;
        }
      }
    }
  }
}

</style>